How do you associate multiple labels with one input?

Using Fieldsets and Legends in HTML Forms

In HTML forms, the <fieldset> element is used to group related inputs together, and the <legend> element provides a caption or title for that group. This helps improve form organization and accessibility by making the structure clearer to both users and screen readers.

Key Points About Fieldsets and Legends

1<fieldset> creates a visual box around grouped form controls.
2<legend> provides a title or description for the <fieldset>.
3
Improves accessibility by giving context to grouped fields.
4
Commonly used for grouping sections like personal info, login details, or preferences.

Example of Fieldset and Legend Usage

Difficulty: 2/10

Topics: HTML forms, accessibility, label association

Scenario Questions

0-2 years experience

1
How would you make a single checkbox have two visible labels — one on the left saying 'Subscribe to newsletter' and another on the right saying 'Opt in' — both clicking to toggle the checkbox?
2
What happens if you give two <label> elements the same 'for' attribute pointing to one input? Does the browser handle it correctly?

2-5 years experience

1
We have a form where a single 'Email' input needs three different label texts depending on user role (admin sees 'Admin Email', user sees 'Your Email', guest sees 'Contact Email'). How would you implement this without duplicating the input?
2
A screen reader user reports that only the first label is announced for an input with multiple labels. How would you debug and fix this?

5-8 years experience

1
Design a reusable FormField component that supports multiple associated labels for complex validation messages (e.g., a primary label, a hint label, and an error label) while maintaining proper accessibility semantics.
2
In a large codebase, you find inputs with multiple labels where some labels are conditionally rendered. What accessibility risks does this create, and how would you enforce consistent patterns?

8+ years experience

1
Your team is migrating a legacy form library that used nested labels (invalid HTML) to a new design system. How would you approach the migration strategy across 50+ micro-frontends owned by different teams?
2
Propose an RFC for a standardized 'multi-label' pattern in your organization's component library that handles internationalization, dynamic label visibility, and ARIA relationships — what stakeholders do you involve and what tradeoffs do you document?

Follow-up Questions

❓What happens if you nest an input inside multiple label elements?
❓How does this affect screen reader announcement order?
❓Can you use aria-labelledby instead, and when would you?